<template>
  <view>
    <u-tabs :list="tabs" :is-scroll="false" :current="current" active-color="#FFB849" @change="change"></u-tabs>
    
    <view class="u-p-24" v-show="current == 0">
      <view class="sj gap-24" v-for="i in 3" :key="i">
        <view class="flex-row align-center" style="padding: 16rpx 24rpx 0 24rpx;">
          <u-avatar src="https://picsum.photos/id/911/200/200" mode="square" size="60"></u-avatar>
          <view class="u-font-28 u-line-1 u-p-16" style="width: 500rpx;margin-right: auto;">仟吉KenGee(宝龙店)</view>
          <my-btn :size="[88, 40, 24]" color="#FFB849" border="1px solid #FFB849" inline round>进店</my-btn>
        </view>
        <view class="u-p-16">
          <view class="coupon gap-16" v-for="i in 3" :key="i">
            <u-avatar src="https://picsum.photos/id/911/200/200" size="130" mode="square"></u-avatar>
            <view class="u-p-l-16 u-p-r-16 flex-col justify-center" style="width: 360rpx;height: 130rpx;">
              <view class="flex-row align-center" style="height: 80rpx;">
                <view class="reduce u-font-36" style="color: #FFB849;">￥100</view>
                <view class="flex-col u-font-22" style="margin: 0 auto;">
                  <view style="color: #FFB849">仅限现烤面包类</view>
                  <view style="color: #FFB849">满100减20</view>
                </view>
              </view>
              <view style="color: #D1D1D1;font-size: 18rpx;">2019.08.0100:00-2019.08.3023:59</view>
            </view>
            <my-btn style="margin-left: 24rpx;" :size="[112, 50, 26]" color="#fff" bg="#FFB849" inline round>去使用</my-btn>
          </view>
        </view>
      </view>
    </view>
    
    <view class="u-p-24" v-show="current == 1">
      <view class="u-p-l-16 u-p-r-16">
        <view class="coupon gap-16" v-for="i in 3" :key="i">
          <u-avatar src="/static/images/logo.png" size="130" mode="square"></u-avatar>
          <view class="u-p-l-16 u-p-r-16 flex-col justify-center" style="width: 360rpx;height: 130rpx;">
            <view class="flex-row align-center" style="height: 80rpx;">
              <view class="reduce u-font-36" style="color: #FFB849;">￥100</view>
              <view class="flex-col u-font-22" style="margin: 0 auto;">
                <view style="color: #FFB849">仅限现烤面包类</view>
                <view style="color: #FFB849">满100减20</view>
              </view>
            </view>
            <view style="color: #D1D1D1;font-size: 18rpx;">2019.08.0100:00-2019.08.3023:59</view>
          </view>
          <my-btn style="margin-left: 24rpx;" :size="[112, 50, 26]" color="#fff" bg="#FFB849" inline round>去使用</my-btn>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tabs: [{
            name: '商家'
          },
          {
            name: '平台'
          }
        ],
        current: 0,
      };
    },
    methods: {
      change(index) {
        this.current = index;
      },
    }
  }
</script>

<style lang="scss">
  .js {
    width: 674rpx;
  }
  
  .coupon {
    width: 674rpx;
    height: 164rpx;
    background: url(../../static/images/coupon.png) center / cover no-repeat;
    display: flex;
    align-items: center;
    padding: 0 16rpx;
  }
</style>
